<template>
	<view>
		<u-swiper :list="banners" keyName="imageUrl" height="200" circular></u-swiper>
		<uni-search-bar style="margin: -64rpx 6rpx 0;" radius=10 placeholder="你想问小柚什么问题呢？" cancelButton="none" disabled
			bgColor="#ffffff" @click="toChat()"></uni-search-bar>
		<view class="index">
			<view class="card list-card">
				<view class="card-header">
					<view class="card-header-label">推荐文章</view>
					<view class="card-header-title">每日精心推荐</view>
				</view>
				<view class="card-content">
					<view class="list">
						<view @click="bindDetail(item)" class="list-item" v-for="(item,index) in stickyPost"
							:key="index">
							<view class="item-image">
								<image :src="item.meta" mode="aspectFill"></image>
							</view>
							<view class="item-content">
								<text class="item-title">{{item.title}}</text>
								<text class="item-des">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="display: inline-block;margin: 5rpx 0;">
			<image src="../../static/kangjiyiqing.png" mode="aspectFill"
				style="display: inline-block;height: 40rpx;width: 40rpx;margin-left: 30rpx;"></image>
			<view style="display: inline-block;position: relative;bottom: 9rpx;left: 10rpx;">
				<text style="font-weight: 700;font-size: 28rpx;">抗击新冠疫情</text>
				<text style="font-weight: 500;font-size: 26rpx;color: rgba(0,0,0,.6);margin: 0 16rpx;">|</text>
				<text style="font-weight: 500;font-size: 26rpx;color: rgba(0,0,0,.6);">截止{{covidLastUpdateTime}}</text>
			</view>
		</view>
		<view class="index">
			<view style="width: 50%;">
				<view style="margin: -30rpx -22rpx -10rpx -22rpx">
					<view class="yiqingLeft">
						<uni-card>
							<image slot="cover" src="../../static/yiqingbeijing.jpg" mode="widthFix"
								style="margin: 0 -20rpx -40rpx -20rpx;"></image>
							<!-- <view class="whiteOn"></view> -->
							<!-- <view style="margin-top: -170rpx;margin-left: 50rpx;font-size: 28rpx;"> -->
							<view class="whiteOn">
								<text @click="toOtherMP('wx34b9f47827e4801d')">核酸证明</text>
								<text @click="toOtherMP('wx34b9f47827e4801d')">天府健康通</text>
								<text @click="toOtherMP('wx8f446acf8c4a85f5')">通信行程卡</text>
							</view>
						</uni-card>
					</view>
				</view>
			</view>
			<view style="width: 50%;margin-left: 350rpx;margin-top: -396rpx;">
				<view style="margin: -30rpx -22rpx -10rpx -22rpx;">
					<view class="yiqingRight">
						<uni-card style="height: 160rpx;">
							<view style="margin-left: -20rpx;margin-bottom: -10rpx;font-size: 26rpx;">
								<view class="covid-item" style="margin-top: -10rpx;">
									<text>四川新增</text>
									<text style="color: #18BC37;">{{sichuanConfirm}}</text>
								</view>
								<view class="covid-item" style="margin-top: 10rpx;">
									<text>国内新增</text>
									<text style="color: #F3A73F;">{{yesterdayConfirm}}</text>
								</view>
								<view class="covid-item" style="margin-top: 10rpx;">
									<text>现有确诊</text>
									<text style="color:#E43D33;">{{currentConfirm}}</text>
								</view>
							</view>
						</uni-card>
						<uni-card style="margin-top: 20rpx;">
							<image class="ucardImg" slot='cover' mode="aspectFill" :src="covidNews.img"
								@click="bindDetail(covidNews)">
							</image>
							<view class="ucardContent">{{covidNews.title}}</view>
							<view class="ucardGrey"></view>
						</uni-card>
					</view>
				</view>
			</view>
		</view>
		<view style="display: inline-block;margin: 5rpx 0;">
			<image src="../../static/xiaoyuandongtai.png" mode="aspectFill"
				style="display: inline-block;height: 40rpx;width: 40rpx;margin-left: 30rpx;"></image>
			<view style="display: inline-block;position: relative;bottom: 9rpx;left: 10rpx;">
				<text style="font-weight: 700;font-size: 28rpx;">校园动态</text>
				<text style="font-weight: 500;font-size: 26rpx;color: rgba(0,0,0,.6);margin: 0 16rpx;">|</text>
				<text style="font-weight: 500;font-size: 26rpx;color: rgba(0,0,0,.6);">西南石油大学</text>
			</view>
		</view>
		<view class="index">
			<view v-for="(item,index) in cats" style="width: 50%;display: inline-block;" :key="index">
				<view style="margin: -30rpx -22rpx -10rpx -22rpx;" @click="bindDetail(item)">
					<uni-card>
						<image class="ucardImg" slot='cover' mode="aspectFill" :src="item.img">
						</image>
						<view class="ucardContent">{{item.content}}</view>
						<view class="ucardGrey"></view>
					</uni-card>
				</view>
			</view>
		</view>
		<u-modal content='小柚想要登录,以获得你的头像与昵称.' title="登录" showCancelButton :show="modalShow" @confrim="getUserProfile()"
			@cancel="modalShow=false"></u-modal>
		<u-notify ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		wxLogin,
		COVID19
	} from '../../services/index/index.js'
	export default {
		data() {
			return {
				modalShow: false,
				covidLastUpdateTime: "",
				currentConfirm: 0,
				yesterdayConfirm: 0,
				sichuanConfirm: 0,
				covidNews: {
					img: "http://mmbiz.qpic.cn/mmbiz_jpg/0Wb1ogeOczYgqXUicGFPdZ0t5yaPH9Ux6qficok4bIm76AfsERnPIam1p5qrwyaKykBIn0dSZOjHcMmaZWvibY4CQ/0?wx_fmt=jpeg",
					link: "https://www.swpu.edu.cn/Office/content.jsp?urltype=news.NewsContentUrl&wbtreeid=1312&wbnewsid=18258",
					title: "致全校师生员工的温馨提示"
				},
				banners: [{
					imageUrl: "https://www.swpu.edu.cn/images/banner/10.jpg"
				}, {
					imageUrl: "https://www.swpu.edu.cn/images/banner/feishu20220408-110604.jpg"
				}, {
					imageUrl: "https://www.swpu.edu.cn/images/banner/2022guyu.jpg"
				}, {
					imageUrl: "https://www.swpu.edu.cn/images/banner/hj.jpg"
				}],
				cats: [{
					img: "https://www.swpu.edu.cn/__local/1/E7/06/513FC627FB4E2F0C4F0D2FFF06E_79CE4D5A_CBEA.jpg",
					content: "张烈辉任西南石油大学校...",
					link: "https://www.swpu.edu.cn/news/info/2511/7060.htm",
					description: "测试"
				}, {
					img: "https://www.swpu.edu.cn/__local/7/48/F5/FF0FAAAE2BF3360221EF66CC0AB_573F7C3F_F8DDF.png",
					content: "学校召开改革发展推进工...",
					link: "https://www.swpu.edu.cn/news/info/2511/7128.htm",
					description: "测试"
				}],
				stickyPost: [{
					meta: "http://mmbiz.qpic.cn/mmbiz_jpg/0Wb1ogeOczbGyL3WCJMYRibpr8PVOttsmxXQbcRv8y5mWJFelqHsoicgdHmdemJQuCkT9dNY7pZgxQcCMicHxJiaUg/0?wx_fmt=jpeg",
					title: "毕业季有奖征集，寻找有故事的你！",
					desc: "曾经在校园的点滴还在眼前，转眼就要说再见",
					link: "https://mp.weixin.qq.com/s/Hlsvl9wj_Xw2nPnbrcnbzA"
				}, {
					meta: "http://mmbiz.qpic.cn/mmbiz_jpg/0Wb1ogeOczYwmBZgEibnic0TA1icje6Y4mCeDfVMXLmc4dHw135f3M4gv0ibThmEdXExMqzCWwBGe6m4MppElMIcYg/0?wx_fmt=jpeg",
					title: "西南石油大学适龄青年应征报名流程",
					desc: "学校征兵咨询热线028—83032925",
					link: "https://mp.weixin.qq.com/s/3zAFkcGuiiyqtonG0c6Qhw"
				}]
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.checkSession({
				success: () => {},
				fail: () => {
					wx.login({
						success: (res) => {
							wxLogin(res.code).then((res) => {
								if (res.message == "token" && res.data != "") {
									uni.setStorage({
										key: 'token_xiaoyou',
										data: res.data,
									});
								}
							})
						}
					})
				},
				complete: () => {
					uni.getStorage({
						key: 'UserProfile',
						fail: () => {
							this.modalShow = true
						}
					})
				}
			})
			COVID19().then((res) => {
				let data = res.data
				this.covidLastUpdateTime = data.lastUpdateTime
				this.currentConfirm = data.chinaTotal.total.confirm - data.chinaTotal.total.dead - data.chinaTotal
					.total.heal
				this.yesterdayConfirm = data.chinaTotal.today.storeConfirm
				for (let i = 0; i < data.areaTree.length; i++) {
					if (data.areaTree[i].name == '中国') {
						data = data.areaTree[i]
						break
					}
				}
				for (let i = 0; i < data.children.length; i++) {
					if (data.children[i].name == '四川') {
						data = data.children[i]
						break
					}
				}
				this.sichuanConfirm = data.today.confirm
			})
			// #endif
			this.$refs.uNotify.show({
				message: "体验版小程序请在右上方三个点打开开发调试",
				type: "success",
				duration: 3700
			})
		},
		methods: {
			getUserProfile() {
				uni.getUserProfile({
					desc: "获取你的头像和昵称",
					success: (res) => {
						uni.setStorage({
							key: 'UserProfile',
							data: res.userInfo,
						})
						this.$refs.uNotify.show({
							message: "登录成功",
							type: "success"
						})
					},
					fail: () => {
						this.$refs.uNotify.show({
							message: "登录失败",
							type: "error"
						})
					},
					complete: () => {
						this.modalShow = false
					}
				})
			},
			toChat() {
				// #ifdef MP-WEIXIN
				uni.getStorage({
					key: 'UserProfile',
					success: (res) => {
						uni.navigateTo({
							url: "../chat/chat"
						})
					},
					fail: () => {
						uni.getUserProfile({
							desc: "获取你的头像和昵称",
							success: (res) => {
								uni.setStorage({
									key: 'UserProfile',
									data: res.userInfo,
								});
							},
							complete: () => {
								uni.navigateTo({
									url: "../chat/chat"
								})
							}
						})
					}
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: "../chat/chat"
				})
				// #endif
			},
			bindDetail(item) {
				uni.navigateTo({
					url: "../outWebView/outWebView",
					success: (res) => {
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: item
						})
					}
				})
			},
			toOtherMP(id) {
				uni.navigateToMiniProgram({
					appId: id,
					success(res) {
						// 打开成功
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		padding: 0 26rpx;
		display: inline-block;
	}

	.whiteOn {
		background-color: #fff;
		width: 60%;
		height: 240rpx;
		position: absolute;
		bottom: 20rpx;
		left: 85rpx;

		text {
			padding-left: 10rpx;

			&:nth-child(1) {
				line-height: 65rpx;
			}

			&:nth-child(2) {
				line-height: 110rpx;
			}

			&:nth-child(3) {
				line-height: 60rpx;
			}
		}

		// margin-top: -240rpx;
		// margin-left: 46rpx;
		// margin-bottom: -60rpx;
	}

	.ucardImg {
		height: 230rpx;
		margin: -40rpx;
	}

	.ucardContent {
		margin-top: -30rpx;
		margin-left: -24rpx;
		height: 40rpx;
		width: 200%;
		color: #fff;
		font-size: 26rpx;
		z-index: 9;
	}

	.ucardGrey {
		background-color: rgba(0, 0, 0, .4);
		width: 200%;
		height: 60rpx;
		margin-top: -40rpx;
		margin-left: -40rpx;
		margin-bottom: -60rpx;
	}

	.card {
		position: relative;
		margin-bottom: 26rpx;
		padding: 40rpx 30rpx;
		overflow: hidden;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 20rpx 40rpx 0 rgba(0, 0, 0, .1);
	}

	.card-header {
		box-sizing: border-box;
		width: 100%;
	}

	.card-header-label {
		color: #7d7d7d;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 32rpx;
	}

	.card-header-title {
		margin-top: 20rpx;
		color: #1c1c1c;
		font-weight: 600;
		font-size: 45rpx;
		line-height: 64rpx;
		display: -webkit-box;
		overflow: hidden;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.card-header-content {
		margin-top: 16rpx;
		color: #999;
		font-size: 30rpx;
		line-height: 34rpx;
	}

	.list-card {
		padding: 0;

		.card-header {
			padding: 44rpx 30rpx 36rpx;
			background: #fdfbf5;
		}

		.card-header-title {
			color: #b38c3e;
			font-weight: 600;
			font-size: 52rpx;
			line-height: 56rpx;
		}

		.card-header-label {
			color: #b38c3e;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 32rpx;
		}

		.card-content {
			padding: 0 30rpx 40rpx;
		}
	}

	.list-item {
		display: flex;
		flex-flow: row nowrap;
		margin-top: 40rpx;
	}

	.item-image {
		width: 104rpx;
		min-width: 104rpx;
		height: 104rpx;
		margin-right: 16rpx;
		overflow: hidden;
		border-radius: 8rpx;

		image {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.item-content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		max-width: 510rpx;
		padding: 12rpx 0;
	}

	.item-title {
		color: #333;
		font-weight: 500;
		font-size: 34rpx;
		line-height: 40rpx;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.item-des,
	.item-title {
		width: 100%;
		overflow: hidden;
	}

	.item-des {
		color: #666;
		font-weight: 300;
		font-size: 24rpx;
		line-height: 28rpx;
		white-space: nowrap;
	}

	.covid-item {
		display: table-column;

		text:nth-child(2) {
			position: absolute;
			right: 26rpx;
		}
	}
</style>
